<template>
   <div class="app-container">
      <el-form ref="form" :model="form"  class="bg-white pd20 form">
         <el-form-item>
            <div class="form-item">
               <span>表单名称：</span> 
               <el-input v-model="form.tableAlias" class="form-name" placeholder="输入表单中文规范名称"></el-input>
            </div>
         </el-form-item>
         <el-form-item>
            <div class="form-item">
               <span class="form-item-tit">表单位置：</span>
               <el-select v-model="from2.Tree1" placeholder="请选择" @change="selectChang1">
                  <el-option
                   v-for="item in treeList"
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"
                  >
                  </el-option>
               </el-select>
               <el-select v-model="from2.Tree2" placeholder="请选择" @change="selectChang2"  v-show="selectTree2.length">
                  <el-option v-for="item in selectTree2" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
               <el-select v-model="from2.Tree3" placeholder="请选择" @change="selectChang3"  v-show="selectTree3.length">
                  <el-option v-for="item in selectTree3" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
               <el-select v-model="from2.Tree4" placeholder="请选择"  @change="selectChang4"  v-show="selectTree4.length">
                  <el-option v-for="item in selectTree4" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id" ></el-option>
               </el-select>
               <el-select v-model="from2.Tree5" placeholder="请选择"  @change="selectChang5"  v-show="selectTree5.length">
                  <el-option v-for="item in selectTree5" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
            </div>
         </el-form-item>
         <el-form-item>
            <div class="form-item">
               <span class="form-item-tit">表单名称（数据库）：</span>
               <span>{{prefix}}</span>
               <el-input type="text" v-model="form.tableName" class="database-name" placeholder="输入表单名称"></el-input>
            </div>
            <div class="form-item">
               <span class="form-item-tit">安全等级：</span>
               <el-select v-model="form.safeLevel" placeholder="请选择安全等级">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
               </el-select>
            </div>
            <!--<div class="form-item">
               <span class="form-item-tit">负责人：</span>
               <el-select v-model="form.managerName" placeholder="请选负责人">
                  <el-option  v-for="item in userList" :key="item.userName" :label="item.userName" :value="item.userName" ></el-option>
               </el-select>
            </div>-->
         </el-form-item>
         <el-form-item>
            <span class="form-item-tit float-left">表单描述：</span>
             <textarea  placeholder="输入表单描述与备注" class="from-remaker" v-model="form.comment"></textarea>
         </el-form-item>
         <el-form-item class="form-configu">
            <span class="form-item-tit">新建表单：</span>
            <el-radio-group v-model="form.resource">
               <el-radio label="普通新建"></el-radio>
               <el-radio label="DDL"></el-radio>
            </el-radio-group>
            <div  v-show="form.resource =='普通新建'">
               <el-button type="primary" size="mini" class="float-right" @click="addRow">新增</el-button>
               <div class="from-tab-parent">
                  <el-table
                     v-loading="loading"
                     :data="userList2"
                     border
                     :row-style="{height:'60px'}"
                     class="from-tab"
                  >
                     <el-table-column
                        label="序号"
                        align="center"
                        prop="userId"
                        width="80"
                     >
                     <template slot-scope="scope">
                           {{scope.$index+1}}
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="字段名称"
                        align="center"
                        key="fieldName"
                        prop="fieldName"
                        width="199"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-input v-model="scope.row.fieldName"></el-input>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="字段长度"
                        align="center"
                        key="length"
                        prop="length"
                        width="100"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-input v-model="scope.row.length"  type="number" max="255"></el-input>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="小数点"
                        align="center"
                        key="scale"
                        prop="scale"
                        width="100"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-input v-model="scope.row.scale" type="number" max="10"></el-input>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="字段中文名称"
                        align="center"
                        key="fieldAlias"
                        prop="fieldAlias"
                        width="200"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-input v-model="scope.row.fieldAlias"></el-input>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="字段类型"
                        align="center"
                        key="dataType"
                        prop="dataType"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-select v-model="scope.row.dataType" placeholder="请选择">
                                 <el-option  v-for="(item,index) in fieldType" :key="index" :label="item" :value="item"></el-option>
                              </el-select>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="是否主键"
                        align="changTime"
                        key="primaryKey"
                        prop="primaryKey"
                        width="199"
                     >
                        <template slot-scope="scope">
                           <div>
                              <el-select v-model="scope.row.primaryKey" placeholder="请选择">
                                 <el-option  v-for="(item,index) in primaryKey" :key="index" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="是否非空"
                        align="center"
                        key="empty"
                        prop="empty"
                        width="199"
                     >
                        <template slot-scope="scope">
                           <el-select v-model="scope.row.empty" placeholder="请选择">
                              <el-option  v-for="(item,index) in isNull" :key="index" :label="item.label" :value="item.value"></el-option>
                           </el-select>
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="字段备注"
                        align="center"
                        key="comment"
                        prop="comment"
                        width="199"
                     >
                        <template slot-scope="scope">
                           <el-input v-model="scope.row.comment"></el-input>
                        </template>
                     </el-table-column>
                     <el-table-column label="操作" align="center" width="80">
                        <template slot-scope="scope">
                           <el-tooltip content="删除" placement="bottom" effect="light">
                              <div class="user-action action-delete"  @click="handleResetPwd(scope.row,scope.$index)"></div>
                           </el-tooltip>
                        </template>
                     </el-table-column>
                  </el-table>
               <!-- <textarea  placeholder="验证栏，如果出现命名冲突或问题，该处进行提示" class="mt10 textarea" v-mode="errorText"></textarea> -->
                  <div style="border:1px solid #ddd;height:100px;" class="mt10"  v-show="errorText">{{errorText}}</div>
               </div>
            </div>
            <div  class="from-tab-parent" v-show="form.resource =='DDL'">
               <textarea v-model="form.ddl" name="" id="" rows="10" style="width:100%;outline:none;border:1px solid #dfe6ec;padding:15px;"></textarea>
            </div>
         </el-form-item>
         <el-form-item class="submit">
            <el-button type="primary" size="mini" @click="handletestRun">测试运行</el-button>
            <el-button type="primary" size="mini" @click="onSubmit" :disabled="isTestRun">立即创建</el-button>
            <el-button size="mini"  @click="handleExit">取消</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<style lang="scss">
   .el-table.from-tab .el-table__body-wrapper .el-table__row td > .cell{
      height:35px!important;
   }
</style>
<style lang="scss" scoped>
@import '~@/assets/styles/system/common.scss';
/**
    Element class start
  **/
.el-table .el-table__body-wrapper .el-table__row td > .cell{
   height:35px!important;
}
.el-form-item__label {
   width: 200px !important;
   text-align: left;
   padding-right:0px;
}
.el-form-item__content{
   font-size:16px!important;
}
.el-form-item{
   margin-bottom:18px;
}
/**
    Element class end
  **/

.app-container{
padding:0
}
.el-textarea__inner{
   height:106px!important;
}
.tab-row{
   .el-input__inner{
      height:28px!important;
   }
}
.form{
   overflow:hidden;
   padding-top:20px;
   .from-remaker{
      width:1046px;
      height:107px;
   };
   .form-configu{
      .from-tab-parent{
         margin-left:70px;
      }
      .textarea,.from-tab{width:100%}
       .textarea{
         height: 99px;
      }
   }
   .textarea,.from-remaker{
      border-radius: 2px;
      border-color:#dfe6ec;
      outline: #dfe6ec;
      padding:8px;
   }
   .submit{
      text-align: center;
      padding:104px 0 37px 0;
   }
}
.form-item{
   margin-right:19px;
   float: left;
   span{
      float:left;
      height:34px;
      line-height:34px;
   }
   .el-input,.el-select{
      width:276px;
      float:left;
      margin-left:10px;
   }
   .database-name.el-input{
      width:204px;
   }
   .form-name.el-input{
      width:276px;
   }
}
</style>
<script>
import {listUser} from '@/api/dataManagement/system/user'
import {mapTreeItem} from '@/api/dataManagement/system/dir'
import {createTable,sqlVerify} from '@/api/dataManagement/system/info'
import {fieldType} from "@/assets/js/fieldTypeList"
//
export default {
   name: "createFrom",
   data() {
      return {
         loading:false,
         primaryKey:[
            {label:'是',value:true},
            {label:'否',value:false}
         ],
         isNull:[
            {label:'是',value:true},
            {label:'否',value:false}
         ],
         fieldType,
         form: {
            tableAlias: "",
            type: [],
            resource: '普通新建',
            desc: "",
            tableName:'',
            safeLevel:'',
            ddl:'',
            managerName:'',
            comment:'',
            isDdl:false
         },
         userList:[],
         userList2: [
         ],
         from2:{
            Tree1:'',
            Tree2:'',
            Tree3:'',
            Tree4:'',
            Tree5:'',
         },
         prefix:'',
         dirId:'',
         treeList:[],
         selectTree1:[],
         selectTree2:[],
         selectTree3:[],
         selectTree4:[],
         selectTree5:[],
         errorText:'',
         isTestRun:true
      };
   },
   mounted() {
      //  var nav =document.getElementsByClassName("el-form")[0].clientHeight
      // var mb8 =document.getElementsByClassName("mb8")[0].clientHeight
      // this.mapHeight = window.window.innerHeight-nav-mb8-160
      // console.log(this.mapHeight)
      this.getUserLisr()
      this.getTreeList()
   },
   methods: {
      addRow(){
         this.userList2.push({
            comment:"",
            dataType:"",
            empty:'',
            fieldAlias:'',
            fieldName:"",
            length:'',
            primaryKey:'',
            scale:'',
            status:''
         })
      },
      getUserLisr(){
         listUser().then(res=>{
            this.userList = res.rows
         })
      },
      onSubmit() {
         console.log(this.dirId)
         createTable({dirId:this.dirId,...this.resetParams()}).then(res=>{
            console.log(res)
            if(res.code == 200){
               this.$message({
                  message: '创建表单成功',
                  type: 'success'
               })
               this.$router.push("/DMS/dataMap/mapDirectory");
            } else{
               this.errorText = res.msg
            }
         })
      },
      handletestRun(){
          sqlVerify({dirId:this.dirId,...this.resetParams()}).then(res=>{
            if(res.code == 200){
               this.$message({
                  message: '测试运行成功',
                  type: 'success'
               })
               this.isTestRun = false
            } else{
            this.$message({
               message: '测试运行失败',
               type: 'error'
            })
               this.errorText = res.msg
            }
         })
      },
      handleExit(){
         this.$router.push("/DMS/dataMap/mapDirectory");
      },
      resetParams(){
         var dto  = {}
         this.form.isDdl = (this.form.resource == '普通新建'?false:true);
         this.tableName = (this.prefix?this.prefix+this.tableName:this.tableName)
         dto = this.form
         dto.fields = this.userList2
         return dto;
      },
      handleResetPwd(row,index){
         this.userList2.splice(index,1)
      },
      selectChang1(value){
         // console.log(this.treeList)
         this.from2.Tree2= ''
         this.selectTree2 = [];
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.treeList.length;i++){
            if(this.treeList[i].id == value){
               this.selectTree2 = this.treeList[i].children
            }
         }
         this.prefix = '';
      },
      selectChang2(value){
         // console.log(this.treeList)
         this.from2.Tree3=''
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree2.length;i++){
            if(this.selectTree2[i].children.length != 0 && this.selectTree2[i].id ==value) {
               this.selectTree3 = this.selectTree2[i].children
            }
            if(this.selectTree2[i].children.length == 0 && this.selectTree2[i].id ==value){
               console.log(this.selectTree2[i])
               this.prefix =this.selectTree2[i].prefix
               this.dirId = this.selectTree2[i].id
            }
         }
         console.log(this.prefix)
      },
      selectChang3(value){
         this.from2.Tree4=''
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree3.length;i++){
            if(this.selectTree3[i].children.length != 0 && this.selectTree3[i].id ==value) {
               this.selectTree4 = this.selectTree3[i].children
            }
            if(this.selectTree3[i].children.length == 0 && this.selectTree3[i].id ==value){
               console.log(this.selectTree3[i])
               this.prefix =this.selectTree3[i].prefix
               this.dirId = this.selectTree3[i].id
            }
         }
         console.log(this.prefix)
      },
      selectChang4(value){
         this.from2.Tree5=''
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree4.length;i++){
            if(this.selectTree4[i].children.length != 0 && this.selectTree4[i].id ==value) {
               this.selectTree5 = this.selectTree4[i].children
            } 
            if(this.selectTree4[i].children.length == 0 && this.selectTree4[i].id ==value){
               this.prefix =this.selectTree4[i].prefix
               this.dirId = this.selectTree4[i].id
            }
         }
         console.log(this.prefix)
      },
      selectChang5(value){
         for(var i=0;i<this.selectTree5.length;i++){
            if(this.selectTree5[i].children.length != 0 && this.selectTree5[i].id ==value) {
               this.selectTree6 = this.selectTree5[i].children
            } 
            if(this.selectTree5[i].children.length == 0 && this.selectTree5[i].id ==value){
               this.prefix =this.selectTree5[i].prefix
               this.dirId = this.selectTree5[i].id
            }
         }
      },
      getTreeList(){
         mapTreeItem().then(res=>{
            this.treeList =res.data.children
         })
      }
   }
};
</script>
